<template>
  <view class="container-flex" >
    <!-- 搜索框 -->
    <view class="search-box">
      <u-search 
        placeholder="搜索服务产品" 
        :show-action="false" 
        bg-color="#fff"
        border-color="#eee"
        height="40"
        :animation="false"
		:disabled="true"
		@click="navigateToService"
      ></u-search>
    </view>
    
    <!-- 轮播图 -->
    <view class="swiper-container">
    <!-- banner -->
    <unicloud-db ref="bannerdb" v-slot:default="{data, loading, error, options}" collection="opendb-banner"
    	field="_id,bannerfile,open_url,title"  >
    	<!-- 当无banner数据时显示占位图 -->
    	<image v-if="!(loading||data.length)" class="banner-image" src="/static/uni-center/headers.png" mode="widthFix" :draggable="false" />
    	
    	<swiper v-else class="swiper-box"   indicator-dots>
    		<swiper-item v-for="(item, index) in data" :key="item._id">
    			<image class="banner-image" :src="item.bannerfile.url" mode="widthFix" :draggable="false" />
    		</swiper-item>
    	</swiper>
    </unicloud-db>
    </view>
    
    <!-- 服务导航 -->
<!--    <view class="service-nav">
      <view 
        v-for="(item, index) in serviceList" 
        :key="index" 
        class="service-item"
        @click="navigateToService(item.path)"
      >
        <u-icon :name="item.icon" :color="primaryColor" size="28"></u-icon>
        <text class="service-text">{{ item.name }}</text>
      </view>
    </view> -->
    
    <!-- 快速申请 -->
    <view class="quick-apply">
    
      <view class="apply-options">
        <view 
          v-for="(item, index) in menus" 
          :key="index" 
          class="apply-option"
          @click="navigateToService(item.path)"
        >
          <uni-icons :type="item.icon" :color="primaryColor" size="24"></uni-icons>
          <text class="apply-text">{{ item.name }}</text>
        </view>
      </view>
    </view>
    
    <!-- 产品推荐 -->
    <view class="product-section" v-if="productList.length">
      <view class="section-title">
        <text class="title">热门产品</text>
        <text class="more" @click="navigateToService('/pages/product/product')">全部产品 ></text>
      </view>
      <view class="product-list">
        <view 
          v-for="(product, index) in productList" 
          :key="index" 
          class="product-card"
          @click="navigateTo('/pages/product/detail?productId='+product._id)"
        >
		 <image v-if="product.avatar" :src="product.avatar.url" mode="widthFix" style="width: 100px;border-radius: 6px;"></image>
          <view class="flex-right">
          	<view class="flex-right-text">
          		<text class="product-title">{{ product.title }}</text>
          		<text class="product-rate">{{ product.channel }}</text>
          	</view>
          	<view class="tags">
          	  <text v-for="(tag, tagIndex) in product.labels" :key="tagIndex" class="tag">{{ tag }}</text>
          	</view>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 资讯区域 -->
    <view class="news-section">
      <view class="section-title">
        <text class="title">行业资讯</text>
        <text class="more" @click="navigateTo('/pages/list/list')">更多资讯 ></text>
      </view>
      <view class="news-list">
        <view 
          v-for="(news, index) in newsList" 
          :key="index" 
          class="news-item"
          @click="navigateTo('/pages/list/detail?id='+news._id+'&title='+news.title)"
        >
          <view class="new-flex"><text class="news-title">{{ news.title.substring(0, 10) }}</text><text class="news-title">{{ $u.timeFormat(news.publish_date, 'yyyy年mm月dd日') }}</text></view>
          <text class="news-date">{{ news.excerpt.substring(0, 20) }}</text>
        </view>
      </view>
    </view>
	<view class="news-section" v-if="videoList.length">
	  <view class="section-title">
	    <text class="title">商学院</text>
	  </view>
	  <view class="news-list">
	    <view 
	      v-for="(item, index) in videoList" 
	      :key="index" 
	      class="news-item"
	    >
		
	      <video :src="item.video.url" style="width: 100%;"></video>
		    <text class="news-title">{{ item.title }}</text>
	    </view>
	  </view>
	</view>
	<u-loading-page loading-text="加载中..." :loading="loading"></u-loading-page>
  </view>
</template>

<script>
import Product from '../product/product.vue';

	const db = uniCloud.database();
	const Odb=uniCloud.importObject('mydb-customer')
  const pageDb=uniCloud.importObject('mydb-page')
export default {
  data() {
    return {
      primaryColor: '#007AFF',
      currentTab: 0,
      serviceList: [],
      menus: [],
      productList: [],
      newsList: [],
	    videoList:[],
	    loading:true
    }
  },
  onLoad() {
    // 设置主题色
    uni.setNavigationBarColor({
      frontColor: '#ffffff',
      backgroundColor: this.primaryColor
    })
	Odb.getHomeData().then((res)=>{
		for (var key in res) {
			if (res.hasOwnProperty(key) && this[key]) {
				this[key] = res[key];
			}
		}
		this.loading=false
	})
  pageDb.getHomePageData().then((res)=>{
		this.productList=res.data.prodRes
		this.videoList=res.data.newsVideoRes
		this.newsList=res.data.newsRes
	})
  },
  methods: {
    navigateTo(path) {
      uni.navigateTo({
        url: path
      })
    },
    navigateToService(path) {
		console.log(path)
		if(path.includes('product') || path.includes('index')){
			uni.switchTab({
				url:path
			})
		}else{
			uni.navigateTo({
			  url: path || '/pages/contact/contact'
			})
		}
    
    },
	searchClick(e) { //点击搜索框
		uni.hideKeyboard();
		uni.navigateTo({
			url: '/pages/list/search/search',
			animationType: 'fade-in'
		});
	}
  }
}
</script>

<style lang="scss" scoped>
.container-flex {
  padding-bottom: 100rpx;
  background-color: #f5f5f5;
}


.search-box {
  padding: 20rpx 30rpx;
}

.swiper-container {
  padding: 0 30rpx;
  margin-bottom: 30rpx;
}
.swiper-box{
	height: 140px;
}
.banner-image{
	width: 100%;
	border-radius: 10px;
}
.service-nav {
  display: flex;
  justify-content: space-around;
  padding: 30rpx;
  background-color: #fff;
  margin: 0 30rpx 30rpx;
  border-radius: 16rpx;

  .service-item {
    display: flex;
    flex-direction: column;
    align-items: center;

    .service-text {
      font-size: 24rpx;
      margin-top: 15rpx;
      color: #333;
    }
  }
}

.quick-apply,
.product-section,
.news-section {
  background-color: #fff;
  margin: 0 30rpx 30rpx;
  padding: 30rpx;
  border-radius: 16rpx;

  .section-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30rpx;

    .title {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
    }

    .more {
      font-size: 24rpx;
      color: #007AFF;
    }
  }
}
.quick-apply{
	background: unset;
	padding: 0;
}
.apply-options {
  display: flex;
  justify-content: space-around;
 flex-wrap: wrap;
 background-color: #f0f8ff;
 padding: 10px 0;
  .apply-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 16rpx;
    width: 33%;
	margin: 5px 0;
    .apply-text {
      font-size: 24rpx;
      margin-top: 15rpx;
      color: #333;
    }
  }
}

.product-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;

  .product-card {
    background-color: #f9f9f9;
    padding: 30rpx;
    border-radius: 16rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	.flex-right{
		width: 64%;
		padding-left: 15px;
		.flex-right-text{
			display: flex;
			align-items: center;
			padding-bottom: 10px;
		}
	}
    .product-title {
      font-size: 28rpx;
      font-weight: bold;
      color: #333;
      margin-right: 10rpx
    }

    .product-desc {
      display: block;
      font-size: 24rpx;
      color: #666;
    }

    .product-rate {
      display: block;
      font-size: 32rpx;
      color: #ff3b30;
      font-weight: bold;
    }

    .tags {
      display: flex;
      flex-wrap: wrap;
      gap: 10rpx;

      .tag {
        background-color: #e6f2ff;
        color: #007AFF;
        font-size: 20rpx;
        padding: 6rpx 16rpx;
        border-radius: 20rpx;
      }
    }
  }
}

.news-list {
  .news-item {
    padding: 20rpx 0;
    border-bottom: 1rpx solid #eee;

    &:last-child {
      border-bottom: none;
    }
	.new-flex{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
    .news-title {
      display: block;
      font-size: 28rpx;
      color: #333;
      margin-bottom: 10rpx;
    }

    .news-date {
      display: block;
      font-size: 24rpx;
      color: #999;
    }
  }
  .video-item{
	  width: 100%;
  }
}
</style>